<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="./css/kapian.css">
    <link rel="stylesheet" href="./css/foot.css">
    <style>
        
      </style>
</head>
<body>
    
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <!-- 每日推荐 -->
      <div class="box2">
        <div class="tietle"><h1 style="text-decoration: underline rgb(246, 187, 40);">每日推荐 </h1></div>
        <br>
        <br>
      <div class="box1">
      <div class="cookieCard-1">
        
        <p class="cookieHeading"></p>
        <p class="cookieDescription"> </p>
        <a href="#"><button>
          <span class="button_top"> Button
          </span>
        </button></a>
      </div>
    
      <div class="cookieCard-2">
        
        <p class="cookieHeading"></p>
        <p class="cookieDescription"> </p>
        <a href="#"><button>
          <span class="button_top"> Button
          </span>
        </button></a>
      </div>
    
      <div class="cookieCard-3">
        
        <p class="cookieHeading"></p>
        <p class="cookieDescription"> </p>
        <a href="#"><button>
          <span class="button_top"> Button
          </span>
        </button></a>
      </div>
    
      <div class="cookieCard-4">
        
        <p class="cookieHeading"></p>
        <p class="cookieDescription"> </p>
        <a href="#"><button>
          <span class="button_top"> Button
          </span>
        </button></a>
      </div>
    
     
    
      
      </div>  
    </div>   
     <!--foot  -->
     <div class="footer">  
      <div class="footer-left">  
          <div class="footer-logo">  
              <img src="./img/LOGO.png" alt="网站LOGO" style="max-width: 60px;">  
          </div>  
          <p class="footer-text" class="lorem">我们是顺职2班第8小组。我们希望通过这个平台,
           为热爱英语的同学们提供一个交流、分享、成长的空间。
           </p>  
      </div>  
      <div class="footer-right">  
          <div class="footer-link" class="lorem">电子邮件：2514***@gta.edu.cn</div>  
          <div class="footer-link" class="lorem">电话:138******256</div>  
          <div class="footer-link" class="lorem">***********</div>  
      </div>  
      </div>  
      <script src="./js/swiper-bundle.min.js"></script>
      <script>
        var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      spaceBetween: 10,
      autoplay: {
      stopOnLastSlide: true,
      },
      navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      breakpoints: {
        "@0.00": {
          slidesPerView: 1,
          spaceBetween: 10,
        },
        "@0.75": {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        "@1.00": {
          slidesPerView: 3,
          spaceBetween: 40,
        },
        "@1.50": {
          slidesPerView: 4,
          spaceBetween: 50,
        },
      },
    });
       
      </script>
</body>
</html>